

function Footer(props) {
    function changeStatus(res){
        props.changeStatus(res)
    }
    function clearAll(){
        props.clearAll()
    }
    return (
        <>
            <footer className="footer">
                <span className="todo-count">
                    <strong /> {props.left}  item undone
                </span>
                <ul className="filters">
                    <li onClick={()=>{changeStatus('All')}}>
                        <a href="#" className={ props.status=='All'?'selected':''}>All</a>
                    </li>
                    <li onClick={()=>{changeStatus('Active')}}>
                        <a href="#" className={ props.status=='Active'?'selected':''}>Active</a>
                    </li>
                    <li onClick={()=>{changeStatus('Completed')}}>
                        <a href="#" className={ props.status=='Completed'?'selected':''}>Completed</a>
                    </li>
                </ul>
                <button className="clear-completed" onClick={clearAll}>Clear completed</button>
            </footer>
        </>
    )


}

export default Footer